<template>
  <div class="userCenter">
    <div class="userCenter_header" :style="{ height: data.is_vip == 1 ? '227px' : 'auto' }">
      <div class="header_box">
        <div class="flex align_center justify_between">
          <div class="flex align_center left">
            <div class="user_img">
              <img :src="data.head_img">
            </div>
            <div class="user_info">
              <p>
                <span class="fontBold color1 content4">{{ data.username }}</span>
                <span class="fontBold content3 color1 position">{{ data.job }}</span>
              </p>
              <p class="company content3 font400 color3 van-ellipsis">
                {{ data.company }}
              </p>
            </div>
          </div>
          <div v-if="false">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bianji" />
            </svg>
          </div>
        </div>
        <!-- v-if="data.is_admin" -->
        <p class="integral" v-if="Integral.integral">
          <span class="content3 font400 color6">当前积分:</span>
          <span class="fontBold color1 content6">{{ Integral.integral }}</span>
          <span v-if="false" @click="recharge" class="content3 font400 color2">立即充值 ></span>
        </p>
        <p class="integral content3 font400 color6" v-else>
          当前暂无积分
        </p>
        <div class="vip_box">
          <img src="@/assets/img/vip2.png">
          <p class="title">
            {{ data.company_level_name ? data.company_level_name : '非会员单位' }}
          </p>
          <span v-if="data.expire_time" class="time content2 color4 font400">会员到期时间：{{ data.expire_time }}</span>
          <span v-else class="time content2 color4 font400">快快成为深房协的会员吧~</span>
          <div v-if="data.is_vip == 1 && data.is_admin == 0" />
          <div class="btn color4 font400 content3" @click="agreement" v-else>
            {{ data.is_vip == 0 && data.is_admin == 0 ? '申请入会' : '去续费' }}
          </div>
        </div>
      </div>
    </div>
    <div class="userCenterKing">
      <div class="flex align_center justify_between king">
        <div class="king_item" v-for="(item, index) in kingList" :key="index" @click="jump(item.path)">
          <svg class="icon" aria-hidden="true">
            <use :href="item.icon" />
          </svg>
          <p class="content3 color3 font400">
            {{ item.name }}
          </p>
        </div>
      </div>
      <div class="yingxiao_box" @click="goMyCard" v-if="data_yx.market_card">
        <div class="yx_img">
          <div class="yx_img_box">
            <img src="@/assets/img/idcard2_fill.png">
          </div>
        </div>
        <div class="yx_text">
          <div class="yx_title_t">营销人员信息登记卡</div>
          <div class="yx_text_t">有效日期至：{{data_yx.market_card_effective_time}}</div>
        </div>
        <div class="yx_more">查看详情></div>
      </div>
      <div class="serverList">
        <div class="serverListBox" v-for="(item, index) in serverList" :key="index"
          v-show="item.list[index].is_vip === 1 && item.list[index].is_admin">
          <div class="serverList_header" v-show="item.list[index].is_vip === 1 && item.list[index].is_admin">
            <p class="color1 content7 fontBold">
              {{ item.title }}
            </p>
          </div>
          <div class="serverListContent flex align_center">
            <div class="serverListContent_item" v-for="(list, key) in item.list" :key="key" @click="goItem(list.path)"
              v-show="list.is_vip === 1">
              <svg class="icon" aria-hidden="true">
                <use :href="list.icon" />
              </svg>
              <p class="content3 color3 font400">
                {{ list.name }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Dialog } from 'vant'
import { userInfo, checkApply, getUserIntegral, getMyCardInfo } from '@/api'
import { useRouter } from 'vue-router'
const router = useRouter()
const data: any = ref([])
const data_yx: any = ref({})
const Integral: any = ref([])
const kingList = ref([
  {
    name: '我的需求',
    icon: '#icon-wodexuqiu',
    path: '/userCenter/needs'
  },
  {
    name: '我的课程',
    icon: '#icon-wodekecheng',
    path: '/userCenter/course'
  },
  {
    name: '我的活动',
    icon: '#icon-wodehuodong',
    path: '/userCenter/activities'
  },
  {
    name: '我的名片',
    icon: '#icon-wodemingpian',
    path: '/userCenter/card'
  }
])
const serverList = ref([{
  title: '企业服务',
  list: [
    {
      name: '企业管理',
      icon: '#icon-xiangmuguanli',
      path: '/enterprise/index'
    },
    // 暂不开发
    // {
    //   name: '资质管理',
    //   icon: '#icon-zizhiguanli',
    //   path: '/enterprise/qualifications'
    // },
    // {
    //   name: '公司关联',
    //   icon: '#icon-gongsiguanlian',
    //   path: '/enterprise/company'
    // },
    {
      name: '人员管理',
      icon: '#icon-renyuanguanli',
      path: '/enterprise/personnel'
    }
  ]
},
{
  title: '其他服务',
  list: [
    {
      name: '费用发票',
      icon: '#icon-feiyongfapiao',
      path: '/otherServices/cost',
      is_vip: 1,
      is_admin: 1
    },
    {
      name: '订单中心',
      icon: '#icon-dingdanzhongxin',
      path: '/otherServices/order',
      is_vip: 1,
      is_admin: 1
    },
    {
      name: '积分中心',
      icon: '#icon-jifenzhongxin',
      path: '/otherServices/integral',
      is_vip: 1,
      is_admin: 1
    },
    {
      name: '设置中心',
      icon: '#icon-shezhizhongxin',
      path: '/otherServices/set',
      is_vip: 1,
      is_admin: 1
    }
  ]
}])

const getData = async () => {
  const key = 'is_vip'
  data.value = await userInfo()
  console.log('noe', data.value.id)
  data_yx.value = await getMyCardInfo({ id: data.value.id })
  console.log(data_yx.value, '1313131')
  serverList.value[0].list.forEach((item: any, i: any) => {
    console.log(item, i)
    item[key] = data.value.is_vip
    item.is_admin = data.value.is_admin
  })
  // console.log(serverList.value)
  Integral.value = await getUserIntegral()
}

getData()

const goMyCard = () => {
  router.push({ path: '/userCenter/Marketing', query: { id: data.value.id } })
}

const agreement = async () => {
  if (data.value.is_admin === 1 && data.value.is_vip === 1) {
    router.push({ path: '/userCenter/member', query: { name: data.value.company_level_name, time: data.value.expire_time } })
  } else if (data.value.is_admin === 0 && data.value.is_vip === 0) {
    // -1：未通过(可申请) 0：未申请(可申请) 1：申请中 2：已通过未缴费 3：到期未缴费 4：已缴费
    const res: any = await checkApply()
    if ((res.status === 1 && res.is_apply_user === 1) || (res.status === 2 && res.is_apply_user === 1) || (res.status === 3 && res.is_apply_user === 1)) {
      router.push({ path: '/applyOf', query: { type: res.status, orderId: res.order_id } })
    } else if ((res.status === 1 && res.is_apply_user === 0) || (res.status === 2 && res.is_apply_user === 0)) {
      Dialog.alert({
        title: '温馨提示',
        message: '企业已进行入会申请，请勿重复提交。'
      })
    } else if ((res.is_apply_user === 0 && (res.status === -1 || res.status === 0))) {
      router.push('/agreement')
    } else if (res.status === 0) {
      router.push('/agreement')
    } else if (res.status === -1) {
      router.push({ path: '/applyOf', query: { type: res.status, orderId: res.order_id } })
    }
  }
}

const goItem = (path: any) => {
  router.push(path)
}

const recharge = () => {
  router.push('/userCenter/recharge')
}

const jump = (path: any) => {
  router.push(path)
}

</script>

<style lang="less" scoped>
.userCenter_header {
  width: 100%;
  height: 227px;
  background: linear-gradient(129deg,
      rgba(238, 118, 42, 0.1) 0%,
      rgba(26, 29, 41, 0) 100%);

  .header_box {
    padding: 26px 15px;

    .user_img {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      margin-right: 15px;

      img {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        object-fit: cover;
      }
    }

    .user_info {
      .company {
        margin-top: 14px;
        width: 267px;
      }

      .position {
        margin-left: 10px;
      }
    }

    .icon {
      width: 23px;
      height: 23px;
    }

    .left {
      width: 85%;
    }

    .integral {
      margin-top: 20px;

      span:nth-child(2) {
        margin: 0 8px 0 5px;
      }

      span:last-child {
        text-decoration: underline;
      }
    }

    .vip_box {
      position: relative;
      margin-top: 23px;

      .title {
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        background: linear-gradient(172deg, #ffba55 0%, #ffd9a1 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute;
        left: 15px;
        top: 18px;
      }

      img {
        width: 100%;
      }

      .time {
        position: absolute;
        left: 15px;
        bottom: 12.5px;
      }

      .btn {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 85px;
        height: 30px;
        background: #ff7a1f;
        border-radius: 15px;
        text-align: center;
        line-height: 30px;
      }
    }
  }
}

.userCenterKing {
  padding: 30px 15px;

  .king {
    width: 100%;
    text-align: center;

    .icon {
      width: 35px;
      height: 35px;
      margin-bottom: 10px;
    }
  }

  .serverList {
    width: 100%;
    border-radius: 5px;
    margin-top: 26px;

    .serverListBox {
      padding: 17px 14px;
      margin-bottom: 14px;
      background: #ffffff;
      border-radius: 5px;

      .serverList_header {
        p {
          border-bottom: 1px solid #cacaca;
          padding-bottom: 15px;
        }
      }

      .serverListContent {
        text-align: center;
        margin-top: 18px;

        .serverListContent_item {
          width: 23%;
          margin-right: 15px;

          .icon {
            width: 25px;
            height: 25px;
          }

          p {
            margin-top: 10px;
          }

          &:last-child {
            margin-right: 0 !important;
          }
        }
      }
    }
  }

  .yingxiao_box {
    height: 66px;
    margin: 30px 0 0 0;
    background-image: url(@/assets/img/yingxiao.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    flex-wrap: nowrap;

    .yx_img {
      flex: 1;

      .yx_img_box {
        padding: 10px 10px 15px 15px;
      }

      img {
        width: 100%;
      }
    }

    .yx_text {
      margin: 15px 0;
      flex: 3;

      .yx_title_t {
        font-weight: bolder;
        color: #80521B;
        margin-bottom: 10px;
      }

      .yx_text_t {
        font-size: 12px;
        color: #BA7727;
      }
    }

    .yx_more {
      flex: 1;
      font-size: 12px;
      color: #80521B;
      align-self: center;
    }
  }
}

@media (min-width: 750px) {
  .userCenter_header {
    width: 100%;
    height: 227px;
    background: linear-gradient(129deg,
        rgba(238, 118, 42, 0.1) 0%,
        rgba(26, 29, 41, 0) 100%);

    .header_box {
      padding: 26px 15px;

      .user_img {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        margin-right: 15px;

        img {
          width: 72px;
          height: 72px;
          border-radius: 50%;
          object-fit: cover;
        }
      }

      .user_info {
        .company {
          margin-top: 14px;
          width: 267px;
        }

        .position {
          margin-left: 10px;
        }
      }

      .icon {
        width: 23px;
        height: 23px;
      }

      .left {
        width: 85%;
      }

      .integral {
        margin-top: 20px;

        span:nth-child(2) {
          margin: 0 8px 0 5px;
        }

        span:last-child {
          text-decoration: underline;
        }
      }

      .vip_box {
        position: relative;
        margin-top: 23px;

        .title {
          font-size: 16px;
          font-weight: bold;
          color: #ffffff;
          background: linear-gradient(172deg, #ffba55 0%, #ffd9a1 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          position: absolute;
          left: 15px;
          top: 18px;
        }

        img {
          width: 100%;
        }

        .time {
          position: absolute;
          left: 15px;
          bottom: 12.5px;
        }

        .btn {
          position: absolute;
          right: 15px;
          top: 50%;
          transform: translateY(-50%);
          width: 85px;
          height: 30px;
          background: #ff7a1f;
          border-radius: 15px;
          text-align: center;
          line-height: 30px;
        }
      }
    }
  }

  .userCenterKing {
    padding: 30px 15px;

    .king {
      width: 100%;
      text-align: center;

      .icon {
        width: 35px;
        height: 35px;
        margin-bottom: 10px;
      }
    }

    .serverList {
      width: 100%;
      border-radius: 5px;
      margin-top: 30px;

      .serverListBox {
        padding: 17px 14px;
        margin-bottom: 14px;
        background: #ffffff;
        border-radius: 5px;

        .serverList_header {
          p {
            border-bottom: 1px solid #cacaca;
            padding-bottom: 15px;
          }
        }

        .serverListContent {
          text-align: center;
          margin-top: 18px;

          .serverListContent_item {
            width: 20%;
            margin-right: 15px;

            .icon {
              width: 25px;
              height: 25px;
            }

            p {
              margin-top: 10px;
            }
          }
        }
      }
    }

    .yingxiao_box {
      height: 66px;
      margin: 30px 0 0 0;

      .yx_img {
        flex: 1;

        .yx_img_box {
          padding: 10px 10px 15px 15px;
        }

        img {
          width: 100%;
        }
      }

      .yx_text {
        margin: 15px 0;

        .yx_title_t {
          margin-bottom: 10px;
        }

        .yx_text_t {
          font-size: 12px;
        }
      }

      .yx_more {
        font-size: 12px;
      }
    }
  }
}
</style>
